<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px;">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>挂号预约</el-breadcrumb-item>
            <el-breadcrumb-item>挂号记录</el-breadcrumb-item>
        </el-breadcrumb>
        
         
        <el-card>
            <h2>{{userName}}的<span style="color: #4cd5e7">挂号记录</span>,共有<span style="color: #4cd5e7">{{historyList.length}}</span>条</h2>
            <el-divider></el-divider>
              <el-table
                ref="singleTable"
                :data="historyList"
                
                
                style="width: 100%; margin-top: 30px">
                <el-table-column
                type="index"
                width="50">
                </el-table-column>
                <!-- 科室 -->
                <el-table-column
                property="departmentName"
                label="科室"
                width="120">
                <template slot-scope="scope">
                    <el-tag type="" closable v-text="scope.row.departmentName"></el-tag>
                </template>
                </el-table-column>
                <!-- 日期 -->
                <el-table-column
                property="date"
                label="挂号日期"
                width="120">
                <template slot-scope="scope">
                    <el-tag type="warning" closable v-text="scope.row.date"></el-tag>
                </template>
                </el-table-column>
                <el-table-column
                property="userName"
                label="姓名"
                width="100">
                </el-table-column>
                <!-- 年龄 -->
                <el-table-column
                property="age"
                label="年龄"
                width="80">
                </el-table-column>
                <!-- 医生 -->
                <el-table-column
                property="doctorName"
                label="医生"
                width="100">
                </el-table-column>
                <!-- 类型 -->
                 <el-table-column
                property="type"
                label="级别"
                width="100">
                <template slot-scope="scope">
                    <el-tag type="danger" effect="plain" v-if="scope.row.type==1">专家</el-tag>
                    <el-tag type="success" effect="plain" v-if="scope.row.type==0">普通</el-tag>     
                </template>
                </el-table-column>
                <!-- 费用 -->
                <el-table-column
                property="type"
                label="挂号费"
                width="100">
                <template slot-scope="scope">
                    <el-tag type="danger" effect="plain" v-if="scope.row.type==1">30元</el-tag>
                    <el-tag type="success" effect="plain" v-if="scope.row.type==0">18元</el-tag>
                </template>
                </el-table-column>
                <!-- 问诊地点 -->
                <el-table-column
                property="date"
                label="问诊地点"
                width="150">
                <template slot-scope="scope">
                    <span ><i class="el-icon-location"></i>{{scope.row.place}}</span>
                </template>
                </el-table-column>
                <!-- 状态 -->
                <el-table-column
                fixed="right"
                property="status"
                label="状态"
                width="140">
                <template slot-scope="scope">
                    <el-tag type="warning" effect="dark" v-if="scope.row.status==0">正在预约中</el-tag>
                    <el-tag type="" effect="dark" v-if="scope.row.status==1">预约成功，待问诊</el-tag>
                    <el-tag type="success" effect="dark" v-if="scope.row.status==2">已问诊</el-tag>
                </template>
                </el-table-column>
            </el-table>
            
        </el-card>
    </div>
</template>

<script>
import {getHisList} from '../../api/users'
import {getUserInfo} from '../../api/login'
export default {
    name: 'History',
    data() {
       return {
        currentRow: null,
        historyList: [],
        userId: '',
        userName: ''
      }
    },
    methods: {
        async getHisInfo(userId) {
            console.log('加载历史记录……');
            const res1 = await getUserInfo();
            console.log("用户ID",res1.data.data.userInfo.userId)
            this.userId = res1.data.data.userInfo.userId;
            console.log('userId',userId)
            const res2 = await getHisList(res1.data.data.userInfo.userId);
            console.log(res2);
            this.historyList = res2.data.data.historyList;
        },

        async getUserInfo() {
            const res = await getUserInfo();
            this.userName = res.data.data.userInfo.userName;
        }



    },
    created(){
     //   this.getUserInfo();

    },
    mounted(){
        this.getHisInfo(this.userId);
        this.getUserInfo();
    }
    
}
</script>

<style>

</style>